<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="/iuie-tag"%>
<%@ taglib prefix="lui" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>

</head>
<lui:context/>
<u:View basePath="/res-system/user" userJS="userAdd" userCSS="userAdd" delayLoadJs="false">
<body>
    <lui:dialogBody>
	    <form class="m-cust" id='addUserFrm'>
	        <lui:ajax url="${ctx }/sys/user/addOne" id="addUserAjax" formQuery="#addUserFrm" formSubmit="true" onSuccess="UserAddPage.onAddOneSucc" 
	            contentType="application/x-www-form-urlencoded" type="post"/>
	        <div class="form-group m-narrow row">
	            <div class="col-sm-6 col-md-6">
	                <div class="col-sm-4 col-md-4">
	                    <label class="m-label required" for="userName">姓名：</label>
	                </div> 
	                <div class="col-sm-8 col-md-8">
	                    <input name="userName" id="userName" class="form-control m-input" maxlength="12" data-not-empty='true' 
	                        data-empty-text='用户姓名不能为空' data-0-validate-func="ValidateUtil.isChineseName"
	                        data-0-error-text="不合法的姓名" data-0-params="['aa']" data-prompt="dialog" data-validate='true'>
	                </div>
	            </div>
	            <div class="col-sm-6 col-md-6">
	                <div class="col-sm-4 col-md-4">
	                    <label class="m-label required" for="userPhone">手机号：</label>
	                </div> 
	                <div class="col-sm-8 col-md-8">
	                    <input name="userPhone" id="userPhone" class="form-control m-input" data-validate='true' data-not-empty='true' 
	                        data-empty-text="手机号不能为空" data-0-error-text="手机号格式错误！" data-0-validate-func="ValidateUtil.isPhoneNumber">
	                </div>
	            </div>
	        </div>
	        <div class="form-group m-narrow row">
	            <div class="col-sm-6 col-md-6">
	                <div class="col-sm-4 col-md-4">
	                    <label class="m-label" for="userState">状态：</label>
	                </div> 
	                <div class="col-sm-8 col-md-8">
	                    <select name="userState" id="userState" class="form-control m-input">
	                        <option value="1" selected="selected">正常</option>
	                        <option value="0">禁用</option>
	                    </select>
	                </div>
	            </div>
	            <div class="col-sm-6 col-md-6">
                    <div class="col-sm-4 col-md-4">
                        <label class="m-label" for="userEmail">邮箱：</label>
                    </div> 
                    <div class="col-sm-8 col-md-8">
                        <input name="userEmail" id="userEmail" class="form-control m-input" data-not-empty='false' data-validate='true'
                             data-0-error-text="邮箱格式错误！" data-0-validate-func="ValidateUtil.isEmail">
                    </div>
                </div>
	        </div>
	        <div class="form-group m-narrow row">
	            <div class="col-sm-6 col-md-6">
	                <div class="col-sm-4 col-md-4">
	                    <label class="m-label" for="userIdcard">身份证号：</label>
	                </div> 
	                <div class="col-sm-8 col-md-8">
	                    <input name="userIdcard" id="userIdcard" class="form-control m-input" data-validate='true' data-not-empty='false'
	                        data-0-error-text="身份证号格式错误！" data-0-validate-func="ValidateUtil.isIdCard">
	                </div>
	            </div>
	        </div>
        </form>
        <form class="m-cust" id="findRoleFrm">
	        <div class="form-group m-narrow row">
	           <div class="col-sm-12 col-md-12">
	               <fieldset class='m-narrow'>
	                   <legend>拥有的角色</legend>
	                   <div id="roleTags"></div>
	               </fieldset>
	           </div>
	        </div>
            <div class="form-group m-narrow row">
	            <div class="col-sm-12 col-md-12">
	                <fieldset class="m-narrow">
	                    <legend>选择角色</legend>
	                    <div class="form-group row m-narrow">
		                    <div class="col-md-4 col-sm-4">
		                        <div class="input-group">
		                            <label for="roleName" class="input-group-addon">角色名称</label>
		                            <input name="roleName" id="roleName" type="text" class="form-control">
		                        </div>
		                    </div>
		                    <div class="col-md-4 col-sm-4">
		                        <div class="input-group"> 
		                            <label for="roleCode" class="input-group-addon">角色编码</label>
		                            <input name="roleCode" id="roleCode" type="text" class="form-control">
		                        </div>
		                    </div>
		                    <div class="col-md-4 col-sm-4">
		                        <div class="input-group"> 
		                            <label for="roleState" class="input-group-addon">角色状态</label>
		                            <select name="roleState" id="roleState" class="form-control">
		                                <option value="">请选择</option>
		                                <option value='1'>正常</option>
		                                <option value='0'>禁用</option>
		                            </select>
		                        </div>
		                    </div>
	                    </div>
	                    <div class="form-group m-narrow">
		                    <div class="btn-group">
		                        <button class="btn btn-primary" type="button" onclick="UserAddPage.queryRoles()">查询</button>
	                            <button class="btn btn-default" type="button" onclick='UserAddPage.resetRolesQuery()'>重置</button>
		                    </div>
	                    </div>
	                    <div class="form-group m-narrow">
	                        <u:dropList id="drop_userState" emptyText="">
			                    <u:dropItem value="1" text="正常" className="m-color-dark-green"/>
			                    <u:dropItem value="0" text="禁用" className="m-color-dark-red"/>
			                </u:dropList>
		                    <u:dropListView id="dropView_oper">
			                    <u:dropView name="addRole" template="hand-right" onClick="UserAddPage.addRole" size="1.2"/>
			                </u:dropListView>
			                <u:dataSet id="roleSet" idField="roleId">
			                    <u:dataField display="ID" name="roleId" visiable="false"/>
			                    <u:dataField display="角色名称" name="roleName" width="180px" align="left"/>
			                    <u:dataField display="角色编码" name="roleCode"/>
			                    <u:dataField display="状态" name="roleState" dropdown="drop_userState"/>
			                    <u:dataField display="操作" name="oper" dropView="dropView_oper" />
			                </u:dataSet>
			                <!-- 查询角色列表 -->
			                <lui:ajax id="findRolesAjax" url="${ctx }/sys/role/findAllByPage" formQuery="#findRoleFrm" onSuccess="UserAddPage.onQueryRoleSucc"/>
			                <lui:datatable id="roleDatatable" dataset="roleSet" ajax="findRolesAjax" pagination="rolePagination"/>
			                <lui:pagination datatable="roleDatatable" id="rolePagination" pageSize="5" pageChoice="5" showPageChoice="false"/>
		                </div>
	                </fieldset>
	            </div>
            </div>
        </form>
    </lui:dialogBody>
    <lui:dialogFooter>
       <button class="btn btn-primary m-btn" type="button" onclick="UserAddPage.saveUser()">保存</button>
       <button class="btn btn-default m-btn" type="button" data-dismiss="dialog-box">关闭</button>
    </lui:dialogFooter>
</body>
</u:View>